<template>
  <div class="index page">
    <h1 class="title">请选择模板</h1>
    <van-grid :gutter="10" :column-num="3">
      <van-grid-item v-for="value in 9" :key="value">
        <van-image @click="goUpload(1)" src="https://img.yzcdn.cn/vant/apple-1.jpg" lazy-load />
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
import api from "api/api.js";

export default {
  name: "index",
  data() {
    return {
      //   自动抠图
      api_key: "mFatstTyYEOvpSDSpBFfSjOwW1Ps_xfR",
      api_secret: "DY9YrYQpBFj82QJPvj8xDjXs-AzrTb4x",
      image_url:
        "https://cdn.faceplusplus.com.cn/mc-official/scripts/demoScript/images/demo-pic83.jpg", // 要扣的图
      url: require("@/assets/test.png"), // 返回的图片内容
      count: 0
    };
  },
  methods: {
    // 自动抠图
    async autoMating() {
      console.log("执行抠图");

      let data = {
        api_key: this.api_key,
        api_secret: this.api_secret,
        image_url: this.image_url,
        return_grayscale: 0
      };
      let res = await api.getImg(data);
      console.log("66666");
      console.log(res);

      if (res.image_id) {
        console.log("请求成功");
        this.url = "data:image/jpg/png;base64," + res.body_image;
      } else {
        console.log(`第几${this.count}请求失败`);
        this.count++;
        this.autoMating();
      }
    },
    goUpload(id) {
      this.$router.push({
        path: "/upload",
        id
      });
    }
  },
  created() {
    // this.autoMating();
  }
};
</script>

<style lang="less" scoped="scoped">
@import "./index.less";

.test {
  width: 375px;
  height: 100px;
  background-color: red;
  font-size: 20px;
}
</style>
